﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="CreateTheme.aspx.cs" Inherits="UM_CreateTheme" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="tek"  %>
<%@ Register Src="~/UserControl/ColorPicker.ascx" TagName="ColorPicker" TagPrefix="uc" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PageContent" runat="Server">
    <style type="text/css">
        .table-branding-theme
        {
            width: 100%;
        }
        .table-branding-theme td
        {
            padding: 3px;
        }
        .table-branding-theme td:first-child
        {
            width: 300px;
            text-align: right;
            padding-right: 10px;
            vertical-align: middle;
        }
        .RadUpload .ruFakeInput
        {
            height: 22px !important;
            width: 211px !important;
            border-color: #999999 !important;
        }
        .ruBrowse
        {
            margin-top: 2px !important;
        }
    </style>
    <gr:Validator ID="uxValdator" MessageType="AlertBox" ValidationFunction="FormValidate"
        runat="server">
        <Items>
            <gr:BasicValidationItem Rule="Required" Message="Theme Name: This is a required field." ControlToValidateID="uxThemeName" />
            <gr:RegExValidationItem RegularExpression="^[a-zA-Z0-9_ ]*$" Message="Theme Name: Special characters are not allowed in this field."
                ControlToValidateID="uxThemeName" />    
            <gr:BasicValidationItem Rule="Required" Message="Theme Name: This is a required field." ControlToValidateID="uxThemeList" />
            <gr:CustomValidationItem ClientValidationFunction="ValidateFolder" Message="Folder Name: This is a required field." ControlToValidateID="uxSJPath" />            
        </Items>
    </gr:Validator>
    <div style="width:900px; margin-top:15px;">
        <div style=" margin-bottom:15px; margin-top:10px;">
         <b>Status </b>
        <asp:RadioButton Checked="true" ID="uxRadioCreate" OnCheckedChanged="ChangeFormMode"
            AutoPostBack="true" Text="Create new theme" GroupName="Mode" runat="server" />
        <asp:RadioButton ID="uxRadioEdit" Text="Edit theme" OnCheckedChanged="ChangeFormMode"
            AutoPostBack="true" GroupName="Mode" runat="server" />
        </div>
       
         
        <table cellpadding="0" cellspacing="0" class="table-branding-theme">          
            <tr>
                <td>
                    Theme Name <span class="RequireLabel">(*)</span>:
                </td>
                <td style="width: 290px">
                    <gr:TextBox ID="uxThemeName" runat="server" Width="220px" MaxLength="50" />
                    <div style="margin-left: 3px;">
                        <gr:GuruComboBox ID="uxThemeList" AutoPostBack="true" OnSelectedIndexChanged="uxThemeList_SelectedIndexChanged"
                            Visible="false" Width="220px" runat="server" EnableEmbeddedBaseStylesheet="false"
                            EnableEmbeddedSkins="false">
                        </gr:GuruComboBox>
                    </div>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Logo Image <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <div class="TaxInputOutLine" style="width: 221px; height: 28px !important">
                        <tek:RadUpload ID="uxLogoImage" Width="270px" AllowedFileExtensions=".png,.jpg,.bmp"
                            runat="server" InitialFileInputsCount="1" ControlObjectsVisibility="None" Localization-Select="Browse">
                        </tek:RadUpload>
                    </div>
                </td>
                <td>
                    <span class="RequireLabel">(542px x 70px, *.png, *.jpg, *.bmp only)</span>
                </td>
            </tr>
            <tr>
                <td>
                    Background Image:
                </td>
                <td>
                    <div class="TaxInputOutLine" style="width: 221px; height: 28px !important">
                        <tek:RadUpload ID="uxBackgroundImage" Width="270px" AllowedFileExtensions=".png,.jpg,.bmp"
                            runat="server" InitialFileInputsCount="1" ControlObjectsVisibility="None" Localization-Select="Browse">
                        </tek:RadUpload>
                    </div>
                </td>
                <td>
                    <span class="RequireLabel">(640px x 500px, *.png, *.jpg, *.bmp only)</span>
                </td>
            </tr>
            <tr>
                <td colspan="3" style="text-align: left">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    Background Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxBackgroundColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Primary Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxPrimaryColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Primary Text Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxPrimaryTextColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Primary Link Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxPrimaryLinkColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
             <tr>
                <td>
                    Left Header Background Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxLeftHeaderBackgroundColor" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Right Header Background Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxRightHeaderBackgroundColor" runat="server" />
                </td>
            </tr>
            
            <tr>
                <td>
                    Header Text Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxHeaderTextColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Menu Text Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxMenuTextColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Border Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxBorderColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan="3" style="text-align: left">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    Export Background Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxExportBackgroundColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Export Text Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxExportTextColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Grid Header Text Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxGridHeaderTextColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Grid Alter Row Background Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxGridAlterRowColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Grid Line Border Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxGridLineBorderColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Report Total Background Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxReportTotalBackgroundColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Report Total Text Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxReportTotalTextColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan="3" style="text-align: left">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    Button Text Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxButtonTextColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Button Background Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxButtonColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Button Secondary Background Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxButtonSecondaryColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Login Address Background Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxLoginAddrBackgroundColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    Login Address Text Color <span class="RequireLabel">(*)</span>:
                </td>
                <td>
                    <uc:ColorPicker ID="uxLoginAddrTextColor" runat="server" />
                </td>
                <td>
                </td>
            </tr>
        </table>
        <div style="margin-left: 40px; margin-top: 15px;" id="uxPanelOption" runat="server">           
                <asp:CheckBox Text="Generate Theme" Checked="true" ID="uxChkGenerate" runat="server" />
                <br />
                <asp:CheckBox Text="Save Theme Information" Checked="true" ID="uxChkSaveTheme" runat="server" />
                <br />
                <asp:CheckBox Text="Copy to folder" Checked="true" ID="uxChkCopyToFolder" runat="server" />
                <gr:TextBox ID="uxSJPath" runat="server" Width="350" MaxLength="500" /> 
               
                        
        </div>
        <div style="text-align: right; margin-top:15px;">
            <asp:Button ID="uxSubmit" runat="server" Text="Submit" CssClass="FormButton" OnClientClick="return FormValidate();" OnClick="uxSubmit_Click" />
        </div>
        <br />
    </div>

    <script type="text/javascript">
        function DoAlert(message) {
            setTimeout("alert('" + message + "');", 100);
        }
        function ValidateFolder(clientID) {
            var uxCheckBoxCopy = document.getElementById("<%=uxChkCopyToFolder.ClientID %>");
            var uxSJPath = document.getElementById(clientID);
            if (uxCheckBoxCopy.checked && uxSJPath.value == '')
                return false;
            return true;
        }
    </script>
</asp:Content>
